<div class="set-c">
  
    <nz-header class="img-header">
      <p>{{ 'myacy-account.editImgPage.edit-title' | translate }}</p>
    </nz-header>
    
    
    <nz-content class="img-body">
      <div class="img-box">
        <img *ngIf="isShowFImg" style="width:100%;height:100%;" src="{{ _imgURL }}" alt="">
        <div class="small-img-box" *ngIf="croppedImage">
          <img [src]="croppedImage.base64" />
        </div>
        
        <image-cropper
            [imageChangedEvent]="imageChangedEvent"
            [maintainAspectRatio]="true"
            [aspectRatio]="4 / 4"
            [resizeToWidth]="128"
            format="png"
            (imageCropped)="imageCropped($event)"
            (imageLoaded)="imageLoaded()"
            (loadImageFailed)="loadImageFailed()"
            ></image-cropper>
          </div>
          
          <div>
        <div class="file-text">
          <h3>{{ 'myacy-account.editImgPage.text' | translate }}</h3>
        </div>
        <div class="file-box">
          <input class="file-btn" *ngIf='!disabled' type="file"  name="item.bigurl" accept="image/jpg, image/jpeg" (change)="fileChangeEvent($event)"/>
          <button nz-button nzType="default">{{ 'myacy-account.editImgPage.update' | translate }}</button>
        </div>
        <span >
          <button nz-button nzType="primary" [disabled]="!imageChangedEvent.target && !croppedImage"  (click)="uploadImage($event,i)">{{ 'myacy-account.editImgPage.end' | translate }}</button>
        </span>
      </div>
      
    </nz-content>
  
  </div>
  